﻿<!DOCTYPE HTML>
<html>

<head>
	<title>使用Selector API实现购物车客户端计算</title>
	<meta charset="utf-8" />
	<style>
		table {
			width: 600px;
			text-align: center;
			border-collapse: collapse;
		}

		td,
		th {
			border: 1px solid black
		}

		td[colspan="3"] {
			text-align: right;
		}
	</style>

</head>

<body>
	<table id="data">
		<thead>
			<tr>
				<th>商品名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>iPhone6</td>
				<td>¥4488.00</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>¥4488.00</td>
			</tr>
			<tr>
				<td>iPhone6 plus</td>
				<td>¥5288.00</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>¥5288.00</td>
			</tr>
			<tr>
				<td>iPad Air 2</td>
				<td>¥4288.00</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>¥4288.00</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">Total: </td>
				<td>¥14064.00</td>
			</tr>
		</tfoot>
	</table>
	<script>
		//1. 查找触发事件的元素
		//本例中: 用户点击table中的button触发变化
		//1.1 先查找id为data的table
		var table=document.getElementById("data")
		//1.2 再在table下查找所有的按钮
		var btns=
			table.getElementsByTagName("button")
		console.log(btns);
		//2. 绑定事件处理函数
		//本例中: 因为所有的按钮都要绑定单击事件，所以需要遍历找到的每个按钮
		for(var btn of btns){
			//每遍历一个按钮，就为这个按钮绑定单击事件处理函数
			btn.onclick=function(){
				// alert("疼!")
				//希望，点哪个按钮，就只让哪个按钮的内容变成❀
				//错误: 因为btn是全局变量，很可能发生变化
				// btn.innerHTML="❀";
				//正确: 
				this.innerHTML="❀";
			}
		}

			//3. 查找要修改的元素
			//4. 修改元素


	</script>
</body>

</html>